<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common/swiper/swiper.min.css"/>
    <style>
        html,body{
            background-color: #FFFFFF;
            /*background: transparent;*/
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        /*banner图片样式*/
        .swiper-slide-banner{
            width: 100%;
            height: 1.60rem;
            background-size: 3.75rem 1.60rem;
        }
        .article-block {
            width: 3.59rem;
            height: 1.16rem;
            margin-left: 0.16rem;
            border-color: #EEEEEE;
            border-style:solid;
            border-bottom-width: 0.01rem;
            justify-content: space-between;
            align-items: center;
        }
        .article-image {
            width: 1.00rem;
            height: 0.75rem;
            background-size: 1.00rem 0.75rem;
            margin-right: 0.16rem;
        }
        .article-text {
            font-size: 0.14rem;
            line-height: 0.20rem;
            color: #231313;
            white-space:wrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break:break-all;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
        }
        .article-tag {
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #C4C5CE;
        }
        .see {
            width: 0.16rem;
            height: 0.10rem;
            background-size: 0.16rem 0.10rem;
            background-image: url(../image/course/see.png);
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div class="swiper-container" id="banner-swiper-container" style="width: 100%; height: 1.60rem;">
        <div class="swiper-wrapper" id="banner-swiper-wrapper"></div>
        <div class="swiper-pagination"></div>
    </div>
    <div id="article-list"></div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript" src="../script/common/swiper/swiper.min.js"></script>
<script type="text/javascript">
    var bannerSwiperWrapperEl, articleListEl;
    var bannerSwiper;
    var articleData = [],  pageNum = 1;
    apiready = function () {
        bannerSwiperWrapperEl = $api.byId('banner-swiper-wrapper');
        articleListEl = $api.byId('article-list');

        getBanner();
        getArticleList();

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:1000
            }
        }, function(ret, err){
            getArticleList();
        });

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getBanner() {
        api.ajax({
            url: apiUrl + '/article/slide-list',
            tag: '/article/slide-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var bannerData = ret.data.article_list;
                    for (var i=0,len=bannerData.length; i<len; i++)
                    {
                        articleData["a-" + bannerData[i]["article_id"]] = bannerData[i]["title"];
                        $api.append(bannerSwiperWrapperEl,
                            '<div id=' + "a-" + bannerData[i]["article_id"] + ' class="swiper-slide swiper-slide-banner" tapmode onclick="openArticleInfoWin(this)" style="background-image: url(' + bannerData[i]["thumb"] + ');"></div>'
                        );
                    }
                    bannerSwiper = new Swiper ('#banner-swiper-container', {
                        autoplay:{
                            disableOnInteraction: false,
                        },
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function getArticleList() {
        api.ajax({
            url: apiUrl + '/article/article-list',
            tag: '/article/article-list',
            method: 'get',
            data: {
                page_size: 20,
                page_num: pageNum,
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var articleListData = ret.data;
                    if ((pageNum-1)*20 <= articleListData.total) {
                        articleListData = articleListData.article_list;
                        for (var i=0,leni=articleListData.length; i<leni; i++)
                        {
                            articleData["a-" + articleListData[i]["article_id"]] = articleListData[i]["title"];


                            var pubTime = formatTime(articleListData[i]['pub_time']);

                            console.log(articleListData[i]['thumb'])
                            $api.append(articleListEl,
                                '<div id=' + "a-" + articleListData[i]["article_id"] + ' style="width: 100%; height: 1.16rem;" tapmode onclick="openArticleInfoWin(this)">' +
                                    '<div class="flex article-block">' +
                                        '<div style="width: 2.23rem;">' +
                                            '<div style="width: 100%; height: 0.40rem">' +
                                                '<p class="article-text">' + articleListData[i]['title'] + '</p>' +
                                            '</div>' +
                                            '<div class="flex" style="width: 100%; justify-content: space-between; margin-top: 0.14rem; align-items: center;">' +
                                                '<p class="article-tag">' + pubTime + '</p>' +
                                                '<div class="flex" style="align-items: center;">' +
                                                    '<div class="see" style="margin-right: 0.05rem"></div>' +
                                                    '<p class="article-tag" style="width: 0.50rem">' + articleListData[i]['browse'] + '</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="article-image" style="background-image: url(' + articleListData[i]['thumb'] + ')"></div>' +
                                    '</div>' +
                                '</div>');
                        }
                    }
                    pageNum ++;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openArticleInfoWin(el) {
        var id, articleId;
        id = $api.attr(el,'id');
        articleId = id.substring(2);
        api.openWin({
            name: 'articleWin',
            url: './course/articleWin.html',
            slidBackType: 'edge',
            pageParam: {
                article_id: articleId,
                title: articleData[id]
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
